<template>
  <div>
    <DynamicTable
      ref="dynamicTableRef"
      row-key="id"
      :header-title="$t('routes.system.system.operation.list')"
      :data-request="loadData"
      :columns="columns"
      bordered
      size="small"
      :showIndex="false"
      :fetch-config="{ listField: 'data', totalField: 'count' }"
    >
    </DynamicTable>
  </div>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue'
  import { message } from 'ant-design-vue'
  import { DynamicTable } from '@/components/core/dynamic-table'
  import type { TableColumn } from '@/components/core/dynamic-table'
  import { useI18n } from '@/hooks/useI18n'
  import { ApiDescription, HttpMethod } from '@/utils/apiDescription'
  import canAccessView from '@/utils/accessCheck'
  import dayjs from 'dayjs'
  import { getOperationInfo } from '@/api/middleSystem'

  defineOptions({
    name: 'Operation',
  })

  const { t } = useI18n()
  const dynamicTableRef = ref<InstanceType<typeof DynamicTable>>()

  /**
   * 表格列
   */
  const columns: TableColumn<any>[] = [
    {
      title: '操作用户',
      dataIndex: 'user',
      hideInSearch: true,
      width: 300,
    },
    {
      title: '操作时间',
      dataIndex: 'time',
      hideInSearch: true,
      width: 300,
      customRender: ({ record }) => {
        return dayjs(record.time).format('YYYY-MM-DD HH:mm:ss')
      },
    },
    {
      title: '操作地址',
      dataIndex: 'location',
      hideInSearch: true,
      width: 300,
    },
    {
      title: '操作描述',
      hideInSearch: true,
      dataIndex: 'describe',
      customRender: ({ record }) => {
        let style = ''
        if (record.type == 0) style = 'color: #F56C6C'
        if (record.type == 1) style = 'color: #67C23A'
        if (record.type == 2) style = 'color: #E6A23C'
        if (record.type == 3) style = 'color: #909399'
        return <span style={style}>{record.describe}</span>
      },
    },
  ]

  /**
   * 加载数据
   */
  const loadData = async params => {
    const { pageIndex, pageSize } = params
    const data = await getOperationInfo.request({ page: pageIndex, pageSize: pageSize })
    return data
  }
</script>
